<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>商品列表</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	<div >
			<div align="center" style="padding: 10px 0;">
				<input type="text" id="name" placeholder="商品名称">
				<button class="btn btn-primary" id="searchBtn">搜索</button>
				<a href="/toAdd"><button type="button">添加</button></a>
				<button class="btn btn-primary" id="removeBtn">批量删除</button>
			</div>
			<div>
				<ul style="list-style-type:none">
					<c:forEach items="${goodsList }" var="goods">
						<li style="float:left;width:25%;padding: 10px 0;">
							<div>
								<a href="/toShow?id=${goods.id}"> <img alt="${goods.name}" src="${goods.imgUrl }" width="300" height="200">
								</a>
							</div>
							<div>
								<strong> ${goods.name} </strong>
							</div>
							<div>
								<strong> ${goods.ename} </strong>
							</div>
							<div>
								<em>￥</em> <strong> ${goods.price} </strong>
							</div>
							<div>
								数量： <strong> ${goods.amount} </strong>
							</div>
							<div>
								<strong> ${goods.tag} </strong>
							</div>
							<div>
								<input type="checkbox" class="checkGoodsId" value="${goods.id }"><a href="/toUpdate?id=${goods.id}"><button>编辑</button></a>
							</div>
						</li>
						<li></li>
					</c:forEach>
				</ul>
			</div>
			<div style="padding:400px;">
				<button type="button" id="preBtn">&lt;上一页</button>
				<c:forEach begin="1" end="${pages }" var="pageNo">
					<c:choose>
						<c:when test="${currentPage == pageNo }">
						${pageNo}
					</c:when>
						<c:otherwise>
							<a href="/?pageNo=${pageNo}">${pageNo}</a>
						</c:otherwise>
					</c:choose>
				</c:forEach>
				<button type="button" id="nextBtn">下一页&gt;</button>
				&nbsp;&nbsp;共${pages}页 &nbsp;到第<input type="text" id="pageNum" style="width:25px">页&nbsp;
				<button type="button" id="pageBtn">确定</button>
			</div>
	</div>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#searchBtn').click(function() {
				var name = $('#name').val();
				location = "/?name=" + name;
			});
			$('#removeBtn').click(function() {
				var checkIds = $('.checkGoodsId:checked');
				if (checkIds.length == 0) {
					alert("请选择要删除的商品信息")
				} else {
					var removeUrl = "/remove?";
					checkIds.each(function() {
						var id = $(this).val();
						removeUrl += "id=" + id + "&";
					})
					removeUrl = removeUrl.substring(0, removeUrl.length - 1);
					if (confirm("您是否要删除这些商品？")) {
						$.ajax({
							url : removeUrl,
							type : 'get',
							timeout : 3000,
							async : false,
							dataType : 'json',
							success : function(data) {
								alert(data.message);
								location = "/";
							}
						})
					}
				}

			})
			var current = ${currentPage};
			var pages = ${pages};
			$('#preBtn').click(function() {
				if (current == 1) {
					location = "/?pageNo=1";
				} else if(current <= pages){
					location = "/?pageNo=" + (current - 1);
				}
			})
			$('#nextBtn').click(function() {
				if (current == pages) {
					location = "/?pageNo=" + pages;
				} else if (current < pages) {
					location = "/?pageNo=" + (current + 1);
				} else if (current == 1) {
					location = "/?pageNo=1";
				}
			})
			$('#pageBtn').click(function() {
				var pageNum = $('#pageNum').val();
				if (pageNum > pages || pageNum < 1) {
					alert("请输入正确的页数");
					return;
				}
				location = "/?pageNo=" + pageNum;
			})
		})
	</script>
</body>
</html>